<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>留言板</title>
	<link rel="stylesheet" href="./template/layui/css/layui.css">
	<script src="./template/layui/layui.js"></script>
</head>
<body style="background: #F2F2F2">
<ul class="layui-nav" lay-filter="">
    <li class="layui-nav-item">
        <a href="">留言板</a></li>
    <li class="layui-nav-item">
        <a href="">产品</a></li>
    <li class="layui-nav-item">
        <a href="">大数据</a></li>
    <li class="layui-nav-item">
        <a href="javascript:;">解决方案</a>
        <dl class="layui-nav-child">
            <!-- 二级菜单 -->
            <dd>
                <a href="">移动模块</a></dd>
            <dd>
                <a href="">后台模版</a></dd>
            <dd>
                <a href="">电商平台</a></dd>
        </dl>
    </li>
    <li class="layui-nav-item">
        <a href="./reg.php">注册</a></li>
</ul>
<div class="layui-container" style="padding-top: 30px;"> 
  <div class="layui-row">
  	<form class="layui-form layui-col-md8" style="background: #fff;padding:20px;" action="">
  <div class="layui-form-item">
    <label class="layui-form-label">用户名</label>
    <div class="layui-input-block">
      <input type="text" name="title" required  lay-verify="username" placeholder="手机" autocomplete="off" class="layui-input">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">日期</label>
    <div class="layui-input-block">
      <input type="text" name="title" required  placeholder="手机" id="birthday" autocomplete="off" class="layui-input">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">密码框</label>
    <div class="layui-input-inline">
      <input type="password" name="password" required lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input">
    </div>
    <div class="layui-form-mid layui-word-aux">辅助文字</div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">选择框</label>
    <div class="layui-input-block">
      <select name="city" lay-verify="required">
        <option value=""></option>
        <option value="0">北京</option>
        <option value="1">上海</option>
        <option value="2">广州</option>
        <option value="3">深圳</option>
        <option value="4">杭州</option>
      </select>
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">复选框</label>
    <div class="layui-input-block">
      <input type="checkbox" name="like[write]" title="写作">
      <input type="checkbox" name="like[read]" title="阅读" checked>
      <input type="checkbox" name="like[dai]" title="发呆">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">开关</label>
    <div class="layui-input-block">
      <input type="checkbox" name="switch" lay-skin="switch">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">单选框</label>
    <div class="layui-input-block">
      <input type="radio" name="sex" value="男" title="男">
      <input type="radio" name="sex" value="女" title="女" checked>
    </div>
  </div>
  <div class="layui-form-item layui-form-text">
    <label class="layui-form-label">文本域</label>
    <div class="layui-input-block">
      <textarea name="desc" placeholder="请输入内容" class="layui-textarea"></textarea>
    </div>
  </div>
  <div class="layui-form-item">
    <div class="layui-input-block">
      <button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
      <button type="reset" class="layui-btn layui-btn-primary">重置</button>
      <p class="layui-btn" id="btn">点击</p>
    </div>
  </div>
</form>
  </div>
</div>
<table class="layui-table">
  <colgroup>
    <col width="150">
    <col width="200">
    <col>
  </colgroup>
  <thead>
    <tr>
      <th>昵称</th>
      <th>加入时间</th>
      <th>签名</th>
    </tr> 
  </thead>
  <tbody>
    <tr>
      <td>贤心</td>
      <td>2016-11-29</td>
      <td>人生就像是一场修行</td>
    </tr>
    <tr>
      <td>许闲心</td>
      <td>2016-11-28</td>
      <td>于千万人之中遇见你所遇见的人，于千万年之中，时间的无涯的荒野里…</td>
    </tr>
  </tbody>
</table>
<script>
	//注意：导航 依赖 element 模块，否则无法进行功能性操作
	layui.use(['element','form','laydate','jquery'], function(){
	  var element = layui.element;
	  var form = layui.form;
	  var laydate = layui.laydate;

	  var $ = layui.jquery;


	  $('#btn').click(function(event) {
	  		
	  		layer.open({
			  type: 2,
			  area: ['700px', '450px'],
			  fixed: false, //不固定
			  maxmin: true,
			  content: 'http://www.baidu.com'
			});
	  });


	  laydate.render({
	    elem: '#birthday' //指定元素
	  });



	  form.verify({
	    username: function(value){
	      preg = /^[a-z]\w{5,7}$/;
	      if(!preg.test(value)){
	      	 return "用户不通过，要6位";
	      }
	    }
	  });

	});
</script>
</body>
</html>